<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram 8-15</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper Function to draw an arrow ---
        function drawArrow(fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // --- General Settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '20px "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Diagram (a) ---
        const xa_center = 200;
        const rect_w = 100;
        const rect_h = 250;
        const rect_x = xa_center - rect_w / 2;
        const rect_y = 100;

        // Draw rectangle
        ctx.strokeRect(rect_x, rect_y, rect_w, rect_h);

        // Draw width dimension 'b'
        const dim_y_a = rect_y + rect_h + 30;
        ctx.beginPath();
        ctx.moveTo(rect_x, dim_y_a - 5);
        ctx.lineTo(rect_x, dim_y_a + 5);
        ctx.moveTo(rect_x + rect_w, dim_y_a - 5);
        ctx.lineTo(rect_x + rect_w, dim_y_a + 5);
        ctx.moveTo(rect_x, dim_y_a);
        ctx.lineTo(rect_x + rect_w, dim_y_a);
        ctx.stroke();
        ctx.fillText('b', xa_center, dim_y_a - 15);

        // Draw current I
        ctx.font = 'italic 22px "Times New Roman"';
        drawArrow(xa_center, rect_y + rect_h * 0.6, xa_center, rect_y + rect_h * 0.2);
        ctx.fillText('I', xa_center - 20, (rect_y + rect_h * 0.6 + rect_y + rect_h * 0.2) / 2);
        
        // Draw point P
        ctx.font = '20px "Times New Roman"';
        const p_dist = 100; // representing 'b'
        const px = rect_x + rect_w + p_dist;
        const py = rect_y + rect_h / 2;
        ctx.beginPath();
        ctx.arc(px, py, 3.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = 'italic 22px "Times New Roman"';
        ctx.fillText('P', px + 15, py);
        
        // Draw distance to P dimension 'b'
        ctx.beginPath();
        ctx.moveTo(rect_x + rect_w, py - 5);
        ctx.lineTo(rect_x + rect_w, py + 5);
        ctx.moveTo(px, py - 5);
        ctx.lineTo(px, py + 5);
        ctx.moveTo(rect_x + rect_w, py);
        ctx.lineTo(px, py);
        ctx.stroke();
        ctx.fillText('b', rect_x + rect_w + p_dist / 2, py - 15);

        // Label (a)
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('(a)', xa_center, rect_y + rect_h + 70);

        // --- Diagram (b) ---
        const xb_center = 580;
        const plate_w = 120;
        const plate_half_w = plate_w / 2;
        const plate_left_x = xb_center - plate_half_w;
        const plate_right_x = xb_center + plate_half_w;
        const plate_top_y = 80;
        const plate_bottom_y = 400;

        // Draw plate edges
        ctx.beginPath();
        ctx.moveTo(plate_left_x, plate_top_y);
        ctx.lineTo(plate_left_x, plate_bottom_y);
        ctx.moveTo(plate_right_x, plate_top_y);
        ctx.lineTo(plate_right_x, plate_bottom_y);
        ctx.stroke();

        // Draw jagged ends to indicate infinite length
        ctx.beginPath();
        ctx.moveTo(plate_left_x, plate_top_y);
        ctx.lineTo(plate_left_x + 20, plate_top_y + 10);
        ctx.lineTo(plate_left_x + 40, plate_top_y - 5);
        ctx.lineTo(plate_left_x + 80, plate_top_y + 12);
        ctx.lineTo(plate_left_x + 100, plate_top_y - 3);
        ctx.lineTo(plate_right_x, plate_top_y);

        ctx.moveTo(plate_left_x, plate_bottom_y);
        ctx.lineTo(plate_left_x + 15, plate_bottom_y - 10);
        ctx.lineTo(plate_left_x + 35, plate_bottom_y + 5);
        ctx.lineTo(plate_left_x + 70, plate_bottom_y - 12);
        ctx.lineTo(plate_left_x + 95, plate_bottom_y + 3);
        ctx.lineTo(plate_right_x, plate_bottom_y);
        ctx.stroke();

        // Draw dashed midline
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(xb_center, plate_top_y - 15);
        ctx.lineTo(xb_center, plate_bottom_y + 15);
        ctx.stroke();
        ctx.restore();

        // Draw x-axis
        const axis_y = 240;
        drawArrow(xb_center - 50, axis_y, xb_center + 200, axis_y);
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('x', xb_center + 150, axis_y + 20);

        // Draw current I
        ctx.font = 'italic 22px "Times New Roman"';
        drawArrow(xb_center, axis_y - 40, xb_center, axis_y - 90);
        ctx.fillText('I', xb_center - 20, axis_y - 65);
        
        // Draw point Q
        const qx = xb_center + 150;
        const qy = axis_y;
        ctx.beginPath();
        ctx.arc(qx, qy, 3.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('Q', qx, qy - 20);

        // Draw width dimensions b/2
        // Left side
        drawArrow(xb_center, axis_y, plate_left_x, axis_y);
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('b', xb_center - plate_half_w / 2, axis_y - 25);
        ctx.beginPath();
        ctx.moveTo(xb_center - plate_half_w / 2 - 8, axis_y - 15);
        ctx.lineTo(xb_center - plate_half_w / 2 + 8, axis_y - 15);
        ctx.stroke();
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('2', xb_center - plate_half_w / 2, axis_y - 5);
        
        // Right side
        drawArrow(xb_center, axis_y, plate_right_x, axis_y);
        ctx.font = 'italic 20px "Times New Roman"';
        ctx.fillText('b', xb_center + plate_half_w / 2, axis_y - 25);
        ctx.beginPath();
        ctx.moveTo(xb_center + plate_half_w / 2 - 8, axis_y - 15);
        ctx.lineTo(xb_center + plate_half_w / 2 + 8, axis_y - 15);
        ctx.stroke();
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('2', xb_center + plate_half_w / 2, axis_y - 5);
        
        // Label (b)
        ctx.font = '20px "Times New Roman"';
        ctx.fillText('(b)', xb_center, plate_bottom_y + 40);

        // --- Main Caption ---
        ctx.font = '20px "SimSun", "STSong"';
        ctx.fillText('习题 8-15 图', 400, 480);

    </script>
</body>
</html>